<template>
	<view>
		<tn-nav-bar fixed :backTitle="backTitle">社区发布</tn-nav-bar>
		<view class="content upload_padding" :style="{paddingTop: vuex_custom_bar_height + 5 + 'px'}">
			<!-- <tn-image-upload :action="action" :fileList="fileList"></tn-image-upload> -->
			<u-upload
				:fileList="fileList"
				@afterRead="afterRead"
				@delete="deletePic"
				name="2"
				multiple
				:maxCount="10"
				accept="video"
				:previewFullImage="true"
				uploadText="添加图片"
			></u-upload>
			<view class="upload_title">
				<tn-input v-model="title" class="upload_input" placeholder="增加标签获得更多流量" placeholderStyle="color: #1A1A1A" />
			</view>
			<view class="upload_content">
				<tn-input v-model="content" type="textarea" :height="300" :clearable="false" class="upload_input" placeholder="说说您的心得分享给大家吧～" placeholderStyle="color: #1A1A1A" />
			</view>
			<view class="release_list" @click="recentlyShow = true">
				<image :src="commodityIcon" class="commodity_img"></image>
				<span class="commodity_title">添加商品</span>
				<p class="release_right">
					<span class="release_right_text">{{ addCommodity }}</span>
					<text class="tn-icon-right"></text>
				</p>
			</view>
			<view class="release_list2" @click="topicShow = true">
				<image :src="topicIcon" class="commodity_img"></image>
				<span class="commodity_title">话题</span>
				<p class="release_right">
					<span class="release_right_text">{{ addTopicOfConversation }}</span>
					<text class="tn-icon-right"></text>
				</p>
			</view>
			<view class="release_list2" @click="classShow = true">
				<image :src="classIcon" class="commodity_img"></image>
				<span class="commodity_title">选择分类</span>
				<p class="release_right">
					<span class="release_right_text">{{ addClass }}</span>
					<text class="tn-icon-right"></text>
				</p>
			</view>
		</view>
		<view class="release_bottom">
			<view class="release_draft_box">
				<image :src="draftIcon" style="width: 24px;height: 24px;"></image>
				<view class="release_draft_span">存草稿</view>
			</view>
			<view class="release_draft_box2">
				<tn-button width="90%" height="45px" backgroundColor="#FE0000" fontColor="#FFFFFF">发布</tn-button>
			</view>
		</view>

		<recentlyPurchased :isShow="recentlyShow" @close="closeRecently" />
		<topicPurchased :isShow="topicShow" @close="closeTopic" />
		<classPurchased :isShow="classShow" @close="closeClass" />
	</view>
</template>

<script>
import recentlyPurchased from './components/recentlyPurchased.vue'
import topicPurchased from './components/topicPurchased.vue'
import classPurchased from './components/classPurchased.vue'

export default {
	components: {
		recentlyPurchased,
		topicPurchased,
		classPurchased
	},
	data() {
		return {
			backTitle: '',
			fileList: [],
			title: '',
			content: '',
			unlined: false,
			recentlyShow: false,
			topicShow: false,
			classShow: false,
			addCommodity: '请选择可关联的商品',
			addTopicOfConversation: '关联话题提高曝光率',
			addClass: '请选择可关联的分类',
			commodityIcon: require('@/pages/users/static/xingzu/commodity.png'),
			topicIcon: require('@/pages/users/static/xingzu/topicOfConversation.png'),
			classIcon: require('@/pages/users/static/xingzu/classification.png'),
			draftIcon: require('@/pages/users/static/xingzu/draft.png')
		}
	},
	methods: {
		closeRecently() {
			this.recentlyShow = false
		},
		closeTopic() {
			this.topicShow = false
		},
		closeClass() {
			this.classShow = false
		},
		// 删除图片
		deletePic(event) {
			this[`fileList`].splice(event.index, 1)
		},
		async afterRead(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file)
			let fileListLen = this[`fileList`].length
			lists.map((item) => {
				this[`fileList`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				})
			})
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url)
				let item = this[`fileList`][fileListLen]
				this[`fileList`].splice(fileListLen, 1, Object.assign(item, {
					status: 'success',
					message: '',
					url: result
				}))
				fileListLen++
			}
		},
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
					filePath: url,
					name: 'file',
					formData: {
						user: 'test'
					},
					success: (res) => {
						setTimeout(() => {
							resolve(res.data.data)
						}, 1000)
					}
				});
			})
		},
	}
}
</script>

<style scoped>
.upload_padding {
	margin: 0 20px;
}
.upload_input {
	background: #F5F5F8;
	border-radius: 0px;
	text-indent: 9px
}
.upload_title {
	margin-top: 15px;
}
.upload_content {
	margin-top: 11px;
}
.release_list {
	margin-top: 24px;
}
.release_list2 {
	margin-top: 22px;
}
.commodity_img {
	width: 16px;
	height: 16px;
	vertical-align: middle;
}
.commodity_title {
	margin-left: 6px;
	color: #1A1A1A;
	font-size: 14px;
}
.release_right {
	float: right;
	color: #808080;
}
.release_right_text {
	margin-right: 4px;
}
.release_bottom {
	border-top: 0.5px solid #eeeeee;
	width:100%;
	height: 70px;
	margin:0 auto;
	overflow:hidden;
	position: fixed;
	bottom:0;
}
.release_draft_box {
	text-align: center;
	width: 25%;
	margin-top: 18px;
}
.release_draft_span {
	margin-top: -3px;
	color: #000000;
	font-size: 10px;
}
.release_draft_box2 {
	width: 75%;
	margin-top: -45px;
	float: right;
}



</style>
